.splitpanes {
  display: flex;
  width  : 100%;
  height : 100%;

  &.border-top {
    border-top: 1px solid #d9d9d9;
  }

  &.border-bottom {
    border-bottom: 1px solid #d9d9d9;
  }

  &.border-left {
    border-left: 1px solid #d9d9d9;
  }

  &.border-right {
    border-right: 1px solid #d9d9d9;
  }

  .splitpanes {
    border: 0;
  }

  &--vertical {
    flex-direction: row;
  }

  &--horizontal {
    flex-direction: column;
  }

  &--dragging * {
    user-select: none;
  }

  &__pane {
    width   : 100%;
    height  : 100%;
    overflow: hidden;


    .splitpanes--vertical & {
      transition: width 0.2s ease-out;
    }

    .splitpanes--horizontal & {
      transition: height 0.2s ease-out;
    }

    .splitpanes--dragging & {
      transition: none;
    }
  }

  // Disable default zoom behavior on touch device when double tapping splitter.
  &__splitter {
    touch-action: none;
  }

  &--vertical>.splitpanes__splitter {
    min-width: 1px;
    cursor   : col-resize;
  }

  &--horizontal>.splitpanes__splitter {
    min-height: 1px;
    cursor    : row-resize;
  }
}

.splitpanes {
  .splitpanes__pane {
    background-color: #fff;
  }

  .splitpanes__splitter {
    background-color: #f9f9f9;
    box-sizing      : border-box;
    position        : relative;
    flex-shrink     : 0;

    &:before,
    &:after {
      content : "";
      position: absolute;
      top     : 50%;
      left    : 50%;
    }

    &:first-child {
      cursor: auto;
    }
  }
}

&.splitpanes .splitpanes .splitpanes__splitter {
  z-index: 1;
}

&.splitpanes--vertical>.splitpanes__splitter,
.splitpanes--vertical>.splitpanes__splitter {
  width       : 5px;
  border-left : 1px solid #d9d9d9;
  border-right: 1px solid #d9d9d9;

  &:before,
  &:after {
    transform    : translateY(-50%);
    width        : 3px;
    height       : 5px;
    margin-left  : -2px;
    border-top   : 1px solid #b9b9b9;
    border-bottom: 1px solid #b9b9b9;
  }

  &:before {
    margin-top: -3px;
  }

  &:after {
    margin-top: 6px;
  }
}

&.splitpanes--horizontal>.splitpanes__splitter,
.splitpanes--horizontal>.splitpanes__splitter {
  height       : 5px;
  border-top   : 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;

  &:before,
  &:after {
    transform   : translateX(-50%);
    width       : 5px;
    height      : 4px;
    border-left : 1px solid #b9b9b9;
    border-right: 1px solid #b9b9b9;
    margin-top  : -2px;
  }

  &:before {
    margin-left: -3px;
  }

  &:after {
    margin-left: 6px;
  }
}